<template>
    <div id="app" style="width:100%;height:100%">
        <div style="width:35%;height:10%;float:right">
            <el-row>
                <div style="margin-left:30px;margin-top:30px">
                    地图搜索：<el-select id="suggestId" @clear="clearing()" style="width:80%" v-model="venues.venue" clearable placeholder="请选择场馆" filterable>
                        <el-option v-for="venue in venues" :label="venue.venuename" :value="venue.venuename" :key="venue.venuename"></el-option>
                    </el-select>
                </div>
                <el-input :v-model="timeplacevalue" type="text" id="timeplace" style="margin-left:18%;margin-top:87%;width:80%" disabled>
                    <template slot="prepend">实时定位位置：</template>
                </el-input>
                <el-input :v-model="placevalue" type="text" id="place" style="margin-left:18%;margin-top:3%;width:80%" disabled>
                    <template slot="prepend">您当前位置：</template>
                </el-input>
            </el-row>
            <!-- <el-row>
            <el-button type="primary" style="margin-top:20px;float:left;margin-left:5px" @click="getroad()">驾车路线规划</el-button>
            </el-row> -->
            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
        </div>
        <div id="map" style="width:60%;height:700px;float:left;margin:15px"></div>
        

    </div>
</template>


<script>
export default {    
    data() {
        return {
            p1:'',
            p2:'',
            pagenum:1,
            pagesize:999,
            query:'',
            venues:[],
            places:{
                place:''
            },
            from:null,
            to:null,
        }

    },

   

    

    mounted() {
        var map =new BMapGL.Map("map")
        map.centerAndZoom(new BMapGL.Point(112.36380, 28.55967), 50); // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom();
        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);

        // 创建定位控件
        var locationControl = new BMapGL.LocationControl({
            // 控件的停靠位置（可选，默认左上角）
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            // 控件基于停靠位置的偏移量（可选）
            offset: new BMapGL.Size(20, 20)
        });
        // 将控件添加到地图上
        map.addControl(locationControl);

        // 添加定位事件
        locationControl.addEventListener("locationSuccess", function(e){
            var address = '';
            address += e.addressComponent.province;
            address += e.addressComponent.city;
            address += e.addressComponent.district;
            address += e.addressComponent.street;
            address += e.addressComponent.streetNumber;
            alert("当前定位地址为：" + address);
        });
        locationControl.addEventListener("locationError",function(e){
            alert(e.message);
        });

        // 创建城市选择控件
        var cityControl = new BMapGL.CityListControl({
            // 控件的停靠位置（可选，默认左上角）
            anchor: BMAP_ANCHOR_TOP_LEFT,
            // 控件基于停靠位置的偏移量（可选）
            offset: new BMapGL.Size(10, 5)
        });
        // 将控件添加到地图上
        map.addControl(cityControl);


    
         // 百度地图API功能
	function G(id) {
		return document.getElementById(id);
	}

	var ac = new BMapGL.Autocomplete(    //建立一个自动完成的对象
		{"input" : "suggestId"
		,"location" : map
	});

	ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
	var str = "";
		var _value = e.fromitem.value;
		var value = "";
		if (e.fromitem.index > -1) {
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
		
		value = "";
		if (e.toitem.index > -1) {
			_value = e.toitem.value;
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
		G("searchResultPanel").innerHTML = str;
	});

	var myValue;
	ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
	var _value = e.item.value;
		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
		
		setPlace();
	});

	function setPlace(){
		map.clearOverlays();    //清除地图上所有覆盖物
		function myFun(){
			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			map.centerAndZoom(pp, 18);
			map.addOverlay(new BMapGL.Marker(pp));    //添加标注
		}
		var local = new BMapGL.LocalSearch(map, { //智能搜索
		  onSearchComplete: myFun
		});
		local.search(myValue);

        var cen = map.getCenter(); // 获取地图中心点
        G("timeplace").value=(cen.lng.toFixed(10) + ', ' + cen.lat.toFixed(10))
        // this.to=cen.point


        // alert(this.to)
        var start = new BMapGL.Point(this.from.lng, this.from.lat);
            var end = new BMapGL.Point(this.to.lng, this.to.lat);  
            var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
            driving.search(start, end);
	}          

    //获取当前定位位置
    var geolocation = new BMapGL.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMapGL.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                
                G("place").value=(r.point.lng + ',' + r.point.lat)

                var mPoint = new BMapGL.Point(r.point.lng, r.point.lat);  
                var circle = new BMapGL.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
                map.addOverlay(circle);
                var local =  new BMapGL.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});  
                local.searchNearby('体育设施',mPoint,1000);

            }
            else {
                alert('failed' + this.getStatus());
            }        
        });
    

        
        


    },
     created() {
        this.getvenue()
    },
    methods: {
        getvenue() {
            this.getRequest('/venue/venues/?pagenum='+this.pagenum+'&pagesize='+this.pagesize+'&query='+this.query).then(resp => {
                this.venues=resp.data.current_data
                // console.log(resp)
            })

            },  

            clearing() {
                suggestId.value=''
                this.getvenue()
            },

            getroad() {
                var map = new BMapGL.Map("container");
                map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);

                var p1 = new BMapGL.Point(116.301934,39.977552);
                var p2 = new BMapGL.Point(116.508328,39.919141);

                var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
                driving.search(p1, p2);
            }
        }
        
    }


</script>

<style lang="less" scoped>
html,body{
  padding: 0;
  margin: 0;
  height: 100%;
}

</style>>
